unify badges style and add circular progress bar to workflow list and details pages #394
Conversation
giuseppe-steduto
force-pushed
the
badges-redesign/5b-progress-bar-multiple-statuses
branch
from
369743d
to
0b85c77
Compare
giuseppe-steduto
force-pushed
the
badges-redesign/5b-progress-bar-multiple-statuses
branch
from
0b85c77
to
97cfbb8
Compare
giuseppe-steduto
force-pushed
the
badges-redesign/5b-progress-bar-multiple-statuses
branch
from
97cfbb8
to
8a51b9c
Compare
giuseppe-steduto
changed the title
…ahub#394) Change the style of the workflow badges (Jupyter notebook, GitHub, ...) to unify their style. Move the workflow duration to another badge in the bottom section of the workflow box. Move the actions button to the same section to avoid having nested interactive element and comply with the W3 HTML specifications.
giuseppe-steduto
force-pushed
the
badges-redesign/5b-progress-bar-multiple-statuses
branch
from
8a51b9c
to
59e24eb
Compare
| icon="clock" | ||
| as="a" | ||
| href={"/details/" + id} | ||
| target="_blank" |
There was a problem hiding this comment.
A functional observation. Clicking on a badge on the workflow list page (and on workflow detailed page) leads to opening new tabs. This can quickly fill up, e.g. try to click several times on the duration badge on the worklow detailed page, it'll generate a new tab for every repeated click.
It would be better to always open in the same tab, i.e. remove _blank targets here and elsewhere in the code. If a user would like to open a new tab, they could always middle-click.
There was a problem hiding this comment.
The links on the disk/duration badges were removed. If we want to keep them and to make them point to specific tabs of the workflow detail page, maybe we should open an issue and do so in another PR?
| <Label | ||
| size="tiny" | ||
| content={size.human_readable} | ||
| icon="hdd" |
There was a problem hiding this comment.
Another functional observation. Clicking on the workspace size brings people to the default detailed record page. It would be nicer if the user landed on the workspace tab on the detailed page, because people clicking on the workspace size would probably like to consult workspace content directly.
| REANA is free software; you can redistribute it and/or modify it | ||
| under the terms of the MIT License; see LICENSE file for more details. | ||
| */ | ||
|
|
There was a problem hiding this comment.
A functional observation. When I submit a BSM workflow, immediately after submission the progress is shown as:
Here the "red" seems a bit harsh, so perhaps the colour is not appropriate.
Later when the engine starts and we know how many jobs are to be run, then the progress looks better:
Perhaps we should show "grey" also in the first case?
There was a problem hiding this comment.
Should be fixed now. Can you double check?
| @@ -2,7 +2,7 @@ | |||
| -*- coding: utf-8 -*- | |||
|
|
|||
| This file is part of REANA. | |||
| Copyright (C) 2020, 2022, 2023 CERN. | |||
| Copyright (C) 2020, 2022, 2023, 2024 CERN. | |||
There was a problem hiding this comment.
A functional observation. Whilst the workflow is running, on the detailed record page, a step may be "completed", but the UI still says "created" next to the step selection drop-down:
There was a problem hiding this comment.
Probably unrelated to this PR, let's check and fix this as part of another issue/PR?
| */ | ||
|
|
||
| import PropTypes from "prop-types"; | ||
| import styles from "./WorkflowProgressCircleBar.module.scss"; |
There was a problem hiding this comment.
Another cosmetic observation. Whilst the workflow is running, we are displaying (correctly) green progress bar part for those jobs that have finished. However, on the worklfow list page, this gives too much "green" for a workflow that is "blue" because it is still running.
Perhaps we may want to show the progress circle in blue if the status of the workflow is running? In this way it'll be easy to distinguish directly which workflows are finished and which are still running, and the colour consistency may look better in that way.
There was a problem hiding this comment.
Progress bar is now blue, with solid stroke for finished workflows and dashed stroke for running ones.
giuseppe-steduto
force-pushed
the
badges-redesign/5b-progress-bar-multiple-statuses
branch
from
59e24eb
to
aebb96e
Compare
…ahub#394) Change the style of the workflow badges (Jupyter notebook, GitHub, ...) to unify their style. Move the workflow duration to another badge in the bottom section of the workflow box. Move the actions button to the same section to avoid having nested interactive element and comply with the W3 HTML specifications.
mdonadoni
force-pushed
the
badges-redesign/5b-progress-bar-multiple-statuses
branch
from
aebb96e
to
0b9dd7c
Compare
|
Rebased the PR and made some changes addressing comments posted here and coming from internal discussions in a separate commit. How should we handle commits, should we just squash and merge? |
|
|
mdonadoni
force-pushed
the
badges-redesign/5b-progress-bar-multiple-statuses
branch
from
0b9dd7c
to
013654a
Compare
- Make non-clickable badges more subtle. - Make progress bar smaller and place it close to the step counter. - Fix alignment and spacing of some elements.
mdonadoni
force-pushed
the
badges-redesign/5b-progress-bar-multiple-statuses
branch
from
013654a
to
2bcd36b
Compare
…ahub#394) Change the style of the workflow badges (Jupyter notebook, GitHub, ...) to unify their style. Move the workflow duration to another badge in the bottom section of the workflow box. Move the actions button to the same section to avoid having nested interactive element and comply with the W3 HTML specifications.
- Make non-clickable badges more subtle. - Make progress bar smaller and place it close to the step counter. - Fix alignment and spacing of some elements.
mdonadoni
force-pushed
the
badges-redesign/5b-progress-bar-multiple-statuses
branch
from
2bcd36b
to
d298d74
Compare
…ahub#394) Change the style of the workflow badges (Jupyter notebook, GitHub, ...) to unify their style. Move the workflow duration to another badge in the bottom section of the workflow box. Move the actions button to the same section to avoid having nested interactive element and comply with the W3 HTML specifications.
- Make non-clickable badges more subtle. - Make progress bar smaller and place it close to the step counter. - Fix alignment and spacing of some elements.
mdonadoni
force-pushed
the
badges-redesign/5b-progress-bar-multiple-statuses
branch
from
d298d74
to
92ef3fb
Compare
…ahub#394) Change the style of the workflow badges (Jupyter notebook, GitHub, ...) to unify their style. Move the workflow duration to another badge in the bottom section of the workflow box. Move the actions button to the same section to avoid having nested interactive element and comply with the W3 HTML specifications.
- Make non-clickable badges more subtle. - Make progress bar smaller and place it close to the step counter. - Fix alignment and spacing of some elements.
mdonadoni
force-pushed
the
badges-redesign/5b-progress-bar-multiple-statuses
branch
from
92ef3fb
to
537c8ae
Compare
…hub#394) Change the style of the workflow badges (Jupyter notebook, GitHub, ...) to unify their style. Move the workflow duration to another badge in the bottom section of the workflow box. Move the actions button to the same section to avoid having nested interactive element and comply with the W3 HTML specifications.
- Make non-clickable badges more subtle. - Make progress bar smaller and place it close to the step counter. - Fix alignment and spacing of some elements.
mdonadoni
force-pushed
the
badges-redesign/5b-progress-bar-multiple-statuses
branch
from
537c8ae
to
5a86a8f
Compare
…ub#394) - Make non-clickable badges more subtle. - Make progress bar smaller and place it close to the step counter. - Fix alignment and spacing of some elements.
mdonadoni
force-pushed
the
badges-redesign/5b-progress-bar-multiple-statuses
branch
from
5a86a8f
to
660584e
Compare
Closes #151
Closes #395